<template>
  <div class="my-pagination">
    <div class="page-info">{{startNo}} to {{toNo}} of {{ total }} items </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        :page-count="pageCount"
        small
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CustomPagination',
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSizes: {
      type: Array,
      default: () => [15, 25, 50, 100],
    },
    layout: {
      type: String,
      default: ' sizes, prev, pager, next',
    },
    pageCount:{
      type:Number,
      required: false
    },
    current:{
      type:Number,
      required: false
    }

  },
  data() {
    return {
      currentPage:1,
      pageSize: 15, // 默认每页显示10条数据
    };
  },
  created() {

  },
  watch: {
    current: {
      handler(newVal) {
        if (newVal !== "") {

          if (newVal !== this.currentPage) {
            this.currentPage = newVal
          }
        }
      }
    }
  },
  computed: {
    startNo() {
      if (this.total > 0) {
        return (this.currentPage - 1) * this.pageSize + 1
      } else {
        return 1
      }
    },
    toNo() {
      if (this.total > 0) {

        if (this.currentPage === this.pageCount) {
          let yu = (this.total - (this.pageCount - 1) * this.pageSize)
          let zheng = (this.pageCount - 1) * this.pageSize
          return zheng + yu
        } else {
          let zheng = this.currentPage * this.pageSize
          return zheng
        }
      } else {
        return this.pageSize
      }
    }
  },
  mounted() {

  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.$emit('update:pageSize', size); // 通知父组件更新pageSize
      this.$emit('pagination', {page: this.currentPage, pageSize: size}); // 通知父组件分页信息改变
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.$emit('pagination', {page: currentPage, pageSize: this.pageSize}); // 通知父组件分页信息改变
    },
  },
};
</script>
<style scoped lang="scss">
//@import "../../style/elementUi.scss";

::v-deep .el-pagination button, .el-pagination span:not([class*=suffix]) {
  display: inline-block;
  font-size: 0.8125rem;
  //min-width: 8rem;
  height: 1.75rem;
  line-height: 1.75rem;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .el-pagination .el-select .el-input {
  width: auto !important;
}

::v-deep .el-select {
  width: 5vw !important;
}

.my-pagination {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
  color: #333333;

  .page-info {
    padding: 0.5rem 0.3rem;

    span {
      font-size: 0.825rem;
      line-height: 2rem;
      display: inline-block;

    }
  }

}
</style>